<template>
    <div class="zhjg">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">指挥机构</span>
        </div>
        <div class="zyjjmbDetailAdd">
            <div class="jbxxStyle" >
                <span class="style_title">指挥部门</span>
                <el-form ref="form" status-icon show-message label-width="150px" :model="form" style="height: calc(100% - 100px)">
                    <div class="fromSelect">
                        <el-form-item
                                v-for="(item,index) in form.ListName"
                                :prop="'ListName['+index+'].value'"
                                :rules="Rules(item)"
                                :key="index"
                                :label="item.name"
                        >
                            <el-input
                                    class="noBg border1"
                                    v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5||item.sxlx == 8||item.sxlx == 9||item.sxlx == 10"
                                    style="width:450px;"
                                    :placeholder="'请输入'+item.name"
                                    v-model="item.value"
                            ></el-input>
                            <el-select
                                    class="noBg border1"
                                    style="width: 449px;"
                                    v-model="item.value"
                                    v-show="item.sxlx == 1"
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="option in item.selectOption"
                                        :key="option.zdID"
                                        :label="option.zdmc"
                                        :value="option.zdID"
                                ></el-option>
                            </el-select>
                            <el-date-picker
                                    class="noBg border1"
                                    style="width: 440px;"
                                    v-model="item.value"
                                    v-show="item.sxlx == 2"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    placeholder="选择日期"
                            ></el-date-picker>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="jbxxStyle_bottom">
                <span class="style_title">下级部门</span>
                <div class="table_box">
                    <table>
                        <tr>
                            <th>总指挥职务</th>
                            <th>总指挥名称</th>
                            <th>副指挥职务</th>
                            <th>副指挥名称</th>
                            <th>总指挥手机号</th>
                            <th>值班室电话</th>
                            <th>常驻地点</th>
                            <th>成员</th>
                            <th>职责</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in zjListName" :key="item.id">
                            <td v-for="i in item.jb"
                                :key="i.id">
                                <input
                                        v-model="i.value"
                                        v-on:change="checkInput(i)"
                                        :placeholder="'请输入'+i.name"
                                        type="text"
                                        v-show="i.sxlx == 0 || i.sxlx == 4 || i.sxlx == 5||i.sxlx == 8||i.sxlx == 9||i.sxlx == 10"
                                        />
                            </td>
                            <td @click="addMkuai" v-if="zjListName.length==1||index==zjListName.length-1">+</td>
                            <td @click="reduceMkuai(index)" v-else>-</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="textRight">
                <el-button class="btnDefault"
                           @click="zhjgSave" v-if="!isNopower()">保存</el-button>
                <el-button class="btnDefault" @click="backList">取消</el-button>
            </div>

        </div>

    </div>
</template>
<script>
  import "../../assets/css/global.css";
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";
  export default {
    name: "zhjg",
    data() {
      return {
        zhjgid: "",
        dataList: [],
        form: {
          ListName: [
            { name: "指挥机构名称", value: "",sxzd:'zhjgmc',sxlx:"0" },
            { name: "类型", value: "", sxzd:'zhjglx',sxlx:"1" ,"selectOption":[{ zdmc: "常设指挥机构", zdID: "6001" }, { zdmc: "战时指挥机构", zdID: "6002" }, {zdmc: "临时指挥机构", zdID: "6003"}]},
            { name: "总指挥职务", value:"" ,sxzd: "zfzr",sxlx:"0"  },
            { name: "总指挥名称", value:"" , sxzd: "zfzrmc",sxlx:"0"  },
            { name: "总指挥手机号", value:"" , sxzd: "zzhsjh" ,sxlx:"8" },
            { name: "副总指挥职务", value: "", sxzd: "fzfzr",sxlx:"0" },
            { name: "副总指挥名称", value:"" , sxzd: "fzfzrmc" ,sxlx:"0" },
            { name: "值班室电话", value: "", sxzd:'zbsdh',sxlx:"9" },
            { name: "常驻地点", value: "", sxzd:'czdd',sxlx:"0" },
            { name: "成员", value: "", sxzd:'cy',sxlx:"0" },
            { name: "职责", value: "", sxzd:'zz',sxlx:"0" },
            { name: "装备配备", value: "", sxzd:'zbpb',sxlx:"0" },
            { name: "指挥机构编成类型", value: "", sxzd:'zhjgbclx',sxlx:"1" ,selectOption:[{ zdmc: "指挥控制组", zdID: "4101"},{ zdmc: "通信保障组", zdID: "4102"},{ zdmc: "伪装设障组", zdID: "4103"},{ zdmc: "抢险抢修组", zdID: "4104"},{ zdmc: "治安消防组", zdID: "4105"},{ zdmc: "医疗救护组", zdID: "4106"},{ zdmc: "综合保障组", zdID: "4107"},{ zdmc: "政治工作组", zdID: "4108"},{ zdmc: "信息防护组", zdID: "4109"},]},
            { name: "采集时间", value: "", sxzd:'createTime',sxlx:"2" },
            { name: "更新时间", value: "", sxzd:'updateTime',sxlx:"2" }
          ]
        },
        zjListName: [
          {
            jb: [
              { name: "总指挥职务", value: "" ,sxlx:"0"},
              { name: "总指挥名称", value: "" ,sxlx:"0"},
              { name: "副指挥职务", value: "" ,sxlx:"0"},
              { name: "副指挥名称", value: "" ,sxlx:"0"},
              { name: "总指挥手机号", value: "" ,sxlx:"8"},
              { name: "值班室电话", value: "" ,sxlx:"9"},
              { name: "常驻地点", value: "" ,sxlx:"0"},
              { name: "成员", value: "",sxlx:"0" },
              { name: "职责", value: "" ,sxlx:"0"}
            ],
            id: ""
          }
        ],

      };
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      zyjjmbRfdwnm(){
        return this.$store.state.zyjjmbRfdwnm
      }
    },
    watch: {
      zyjjmbId() {
        this.parentData();
        // this.Rules()
      }
    },
    mounted() {
      this.treeList();
      this.parentData();
    },
    methods: {
      //取消
      backList() {
        this.$store.state.loadingFlag = true;
        this.$store.state.zyjjmbId = '';
        this.$emit("fun");
        setTimeout(() => {
          this.$store.state.loadingFlag = false;
        }, 500);
      },
      //input框校验
      checkInput(item){
        if (item.sxlx == "8") {
          if (!(/^1(3|4|5|7|8)\d{9}$/.test(item.value))&& item.value != "") {
            item.value = "";
            //提示信息
            this.$message({
              message: "请输入正确手机号码，请重新输入",
              type: "warning"
            });
          }
        }
        if (item.sxlx == "9") {
          if (!(/^0[\d]{2,3}-[\d]{7,8}$/.test(item.value))&& item.value != "") {
            item.value = "";
            // 提示信息
            this.$message({
              message: "请输入正确电话号码，请重新输入",
              type: "warning"
            });
          }
        }
      },
      //表单校验
      Rules(item) {
        let arr = [];
        if (item.name !== "成员" && item.name !== "常驻地点" && item.name !== "职责"&& item.name !== "更新时间"&& item.name !== "采集时间"&& item.name !== "装备配备"&& item.name !== "指挥机构编成类型") {
          arr.push({ required: true, message: "必填字段", trigger: ["blur", "change"] });
        }
        if (item.isbt == "1") {
          arr.push({ required: true, message: "必填字段", trigger: "blur" });
        }
        if (item.sxlx == "4") {
          arr.push({ validator: this.checkNum, trigger: "blur" });
        }
        if (item.sxlx == "5") {
          arr.push({ validator: this.checkNumber, trigger: "blur" });
        }
        if (item.sxlx == "8") {
          arr.push({ validator: this.checkMobile, trigger: "blur" });
        }
        if (item.sxlx == "9") {
          arr.push({ validator: this.checkphone, trigger: "blur" });
        }
        return arr
      },
      //父节点数据
      parentData() {
        let params = {
          zyjjmbId: this.zyjjmbId,
          queryType: "zhjg"
        };
        baseServe.getGjqyTable(params).then(res => {
          if(res.data.zhjgInfos&&res.data.zhjgInfos.length>0){
            res = res.data.zhjgInfos[0];
            // this.ListName = [];
            this.zhjgid = res.zhjgid;
            this.form.ListName = [
              { name: "指挥机构名称", value: res.zhjgmc,sxzd:'zhjgmc',sxlx:"0" },
              { name: "类型", value: res.zhjglx, sxzd:'zhjglx',sxlx:"1" ,"selectOption":[{ zdmc: "常设指挥机构", zdID: "6001" }, { zdmc: "战时指挥机构", zdID: "6002" }, {zdmc: "临时指挥机构", zdID: "6003"}]},
              { name: "总指挥职务", value: res.zfzr,sxzd: "zfzr",sxlx:"0"  },
              { name: "总指挥名称", value: res.zfzrmc, sxzd: "zfzrmc",sxlx:"0"  },
              { name: "总指挥手机号", value: res.zzhsjh, sxzd: "zzhsjh" ,sxlx:"8" },
              { name: "副总指挥职务", value: res.fzfzr, sxzd: "fzfzr",sxlx:"0" },
              { name: "副总指挥名称", value: res.fzfzrmc, sxzd: "fzfzrmc" ,sxlx:"0" },
              { name: "值班室电话", value: res.zbsdh, sxzd:'zbsdh',sxlx:"9" },
              { name: "常驻地点", value: res.czdd, sxzd:'czdd',sxlx:"0" },
              { name: "成员", value: res.cy, sxzd:'cy',sxlx:"0" },
              { name: "职责", value: res.zz, sxzd:'zz',sxlx:"0" },
              { name: "采集时间", value: res.createTime?new Date(res.createTime):'', sxzd:'createTime',sxlx:"2" },
              { name: "更新时间", value: res.updateTime? new Date(res.updateTime):'', sxzd:'updateTime',sxlx:"2" }
            ];
            if(res.zhjgInfos && res.zhjgInfos.length>0){
              this.zjListName = [];
              res.zhjgInfos.forEach(item => {
                this.zjListName.push({
                  zhjgid: item.zhjgid,
                  jb: [
                    { name: "总指挥职务", value: item.zfzr, zd: "zfzr" ,sxlx:"0"},
                    { name: "总指挥名称", value: item.zfzrmc, zd: "zfzrmc" ,sxlx:"0"},
                    { name: "副指挥职务", value: item.fzfzr, zd: "fzfzr" ,sxlx:"0"},
                    { name: "副指挥名称", value: item.fzfzrmc, zd: "fzfzrmc",sxlx:"0" },
                    { name: "总指挥手机号", value: item.zzhsjh, zd: "zzhsjh" ,sxlx:"8"},
                    { name: "值班室电话", value: item.zbsdh, zd: "zbsdh" ,sxlx:"9"},
                    { name: "常驻地点", value: item.czdd, zd: "zbsdh" ,sxlx:"0"},
                    { name: "成员", value: item.cy, zd: "cy" ,sxlx:"0"},
                    { name: "职责", value: item.zz, zd: "zz" ,sxlx:"0"},

                  ]
                });
              });
            }
          }



        });
      },
      zhjgSave() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let params = {
              rfdwnm:this.zyjjmbRfdwnm,
              zhjgid: this.zhjgid,
              zyjjmbid: this.$store.state.zyjjmbId,
              zhjgmc: this.form.ListName[0].value,
              zhjglx: this.form.ListName[1].value,
              zfzr: this.form.ListName[2].value,
              zfzrmc: this.form.ListName[3].value,
              zzhsjh: this.form.ListName[4].value,
              fzfzr: this.form.ListName[5].value,
              fzfzrmc: this.form.ListName[6].value,
              zbsdh: this.form.ListName[7].value,
              czdd: this.form.ListName[8].value,
              cy: this.form.ListName[9].value,
              zz: this.form.ListName[10].value,
              createTime: this.form.ListName[11].value?new Date(this.form.ListName[11].value).getTime():new Date().getTime(),
              updateTime: this.form.ListName[12].value?new Date(this.form.ListName[12].value).getTime():new Date().getTime(),
              zhjgInfos: this.zjListName.map(item => {
                let name = item.jb;
                return {
                  zfzr: name[0].value,
                  zfzrmc: name[1].value,
                  fzfzr: name[2].value,
                  fzfzrmc: name[3].value,
                  zzhsjh: name[4].value,
                  zbsdh: name[5].value,
                  czdd: name[6].value,
                  cy: name[7].value,
                  zz: name[8].value,
                };
              })
            };
            baseServe.zhjgUpdata(params).then(res => {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.$router.push('/sjwh/sjsl/zyll',);
              // this.$emit("fun", "");
              this.$emit("changeNum",5)
            });
          }else{
            this.$message({ type: "warning", message: "请按照规则填写" });
          }
        })

      },
      //校验
      //增加
      addMkuai() {
        this.zjListName.push({
          jb: [
            { name: "总指挥职务", value: "" ,sxlx:"0"},
            { name: "总指挥名称", value: "" ,sxlx:"0"},
            { name: "副指挥职务", value: "" ,sxlx:"0"},
            { name: "副指挥名称", value: "" ,sxlx:"0"},
            { name: "总指挥手机号", value: "" ,sxlx:"8"},
            { name: "值班室电话", value: "",sxlx:"9" },
            { name: "常驻地点", value: "" ,sxlx:"0"},
            { name: "成员", value: "",sxlx:"0" },
            { name: "职责", value: "" ,sxlx:"0"}
          ]
        });
      },
      //删除
      reduceMkuai(index) {
        this.zjListName.splice(index, 1);
      },
      treeList() {
        this.dataList = [];
        let params = {
          rfdwnm: 821
        };
        baseServe.cityList(params).then(res => {
          res = res.data.qgrfdwModels;
          res.forEach(item => {
            this.dataList.push({
              label: item.rfdwmc,
              value: item.xh,
              children: item.qgrfdwModels.map(i => {
                let obj = {
                  label: i.rfdwmc,
                  value: i.xh,
                  children: i.qgrfdwModels.map(j => {
                    let obj = {
                      label: j.rfdwmc,
                      value: j.xh
                    };
                    return obj;
                  })
                };
                return obj;
              })
            });
          });
        });
      }
    },
    components: {
    }
  };
</script>

<style lang="less">
    .zhjg {
        height: 100%;
        width: 100%;
        .fontGjqy {
            height: 40px;
            width: 100%;
            font-family: "Microsoft Yahei-Bold";
            color: #00ffff;
            font-size: 18px;
            display: flex;
            margin-bottom: 15px;
            position: relative;
            .el-button {
                position: absolute;
                right: 40px;
                top: 10px;
            }
        }

        .zyjjmbDetailAdd {
            height: calc(100% - 64px);
            width: 100%;
            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .jbxxStyle {
                height: 50%;
                width: 100% ;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 10px 10px 5px;
                overflow-y: auto;
                box-sizing: border-box;
                &::-webkit-scrollbar {
                    width: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    background: rgba(5, 230, 230, 0.6);
                    border-radius: 30px;
                }
                .fromSelect {
                    .el-form-item {
                        display: inline-block;
                    }
                    // display: flex;
                    // justify-content: space-around;
                }
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
            }
            .jbxxStyle_bottom {
                height: calc(50% - 50px);
                width: 100% ;
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                // overflow-y: auto;
                margin: 0 10px 10px 5px;
                &::-webkit-scrollbar {
                    width: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    background: rgba(5, 230, 230, 0.6);
                    border-radius: 30px;
                }
                .table_box {
                    height: calc(100% - 60px);
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        height: 6px;
                        width: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: rgba(5, 230, 230, 0.6);
                        border-radius: 30px;
                    }
                    table {
                        width: 90%;
                        margin: 20px 5%;
                        border: 1px solid rgba(5, 230, 230, 0.6);
                        table-layout: fixed;
                        tr {
                            height: 40px;
                            th {
                                width: 10%;
                                color: #ccc;
                                font-weight: 700;
                                border: 1px solid rgba(5, 230, 230, 0.6);
                            }
                            td {
                                width: 10%;
                                height: 40px;
                                text-align: center;
                                border: 1px solid rgba(5, 230, 230, 0.6);
                                &:last-of-type {
                                    cursor: pointer;
                                    color: #00ffff;
                                    font-size: 20px;
                                    font-weight: 700;
                                }
                                input {
                                    width: 100%;
                                    background: transparent;
                                    color: white;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }

                .jbxxStyle_bottom_box {
                    overflow-y: auto;
                    height: 80%;
                    &::-webkit-scrollbar {
                        height: 6px;
                        width: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: rgba(5, 230, 230, 0.6);
                        border-radius: 30px;
                    }
                }

                .style_form {
                    position: relative;
                    .fromSelect {
                        border: 1px solid rgba(5, 230, 230, 0.3);
                        padding-top: 20px;
                        overflow-y: auto;
                        position: relative;
                        .el-form-item {
                            display: inline-block;
                        }
                    }
                    .icon {
                        position: absolute;
                        right: 50px;
                        top: 40%;
                        cursor: pointer;
                        font-size: 80px;
                        color: rgba(5, 230, 230, 0.6);
                    }
                }

                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
            }
        }
    }
</style>
